<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>选择供应商</title>
  <link rel="stylesheet" type="text/css" href="../css/mui.min.css" />
  <link rel="stylesheet" type="text/css" href="../css/common.css"/>
  <link rel="stylesheet" href="../css/page_css/util.css">
</head>
<body>
  <div class="mui-content">
    <ul class="mui-table-view01">
			 <li class="search-cell">
			 	<div class="mui-input-row mui-search">
					<input type="search" id="searchText" class="mui-input-clear" placeholder="请输入供应商" ><span class="mui-icon mui-icon-clear mui-hidden"></span><span class="mui-placeholder"><span></span></span>
				</div>
				<div class="mui-btn mui-btn-primary" onclick="Search()">
					搜索
				</div>
			 </li>
		</ul>
    <ul class="mui-table-view" id="mui-table-view">
      <!-- 模板引擎 -->
    </ul>
  </div>
  <script type="text/javascript" src="../script/api.js"></script>
  <script src="../script/mui.min.js" type="text/javascript" charset="utf-8"></script>
  <script src="../script/common.js" type="text/javascript" charset="utf-8"></script>
  <script src="../script/template.js" type="text/javascript" charset="utf-8"></script>
  <script type="text/template" id="tmpList">
    {{each datas as item}}
      <li class="mui-table-view-cell mui-radio mui-left">
        <input name="sel_property_radio" type="radio" onchange="selSupplier('{{item.company}}','{{item.name}}')">
        <div class="list_item">
          <div class="flex_center_between margin_b_8">
            <p class="flex_first">
              <label for="" class="no-padding width_auto">供应商:&nbsp;&nbsp;</label>
              <span>{{item.company}}</span>
            </p>
          </div>
          <div class="flex_center_between margin_b_8">
            <p class="flex_first">
              <label for="" class="no-padding width_auto">描述:&nbsp;&nbsp;</label>
              <span>{{item.name}}</span>
            </p>
          </div>
        </div>
      </li>
    {{/each}}
  </script>
  <script>
    var searchText = $api.val($api.byId('searchText'));
    var loadEnd = false;
    var page = 1;
    var company,companyname;
    apiready = function(){
      onLoadData(page,false)
      scrollToBottomHandler(function() {
        if (!loadEnd) { // 未到最后一页
          onLoadData(page,true);
        } else { // 告诉到底了
          EndToast('到底了');
        }
      })
      Refresh(function() {
				onLoadData(page,false);
			});
      api.addEventListener({
        name:'navitembtn'
      },function(ret, err){
          if(ret.type == 'right'){
            if($api.dom("input[type='radio']:checked") == null){
              api.toast({
						    msg: '请选择一项!',
						    duration: 2000,
						    location: 'middle'
							});
              return false
            }
            api.sendEvent({
              name: 'selSupplier',
              extra: {
                company : company,
                companyname : companyname
              }
            });
            setTimeout(function(){
              api.closeWin();
            },100)
          }
      })
    }
    function onLoadData(page,load){
     ajaxrd("selectVendorList",{
       company: searchText,
       pageNo: page,
       pageSize: 10
     },function(data){
       AddData('tmpList','mui-table-view', data.list, load);
     })
    }
    function selSupplier (companyVal, name) {
      company = companyVal
      companyname = name
    }
  </script>
</body>
</html>
